<template>
  <div id="my-coupons">
    <div class="member-nav">
      <ul class="member-nav-list">
        <li
          v-for="(item, index) in tabs"
          :class="[item.active ? 'active' : null]"
          @click="changeTabs(item)"
          :key="index"
        >
          <a href="javascript:;">{{ item.label }}</a>
        </li>
      </ul>
    </div>
    <div class="coupons-container">
      <empty-member v-if="coupons && !coupons.data.length">暂无优惠券</empty-member>
      <ul v-else class="coupon-list">
        <li v-for="(coupon, index) in coupons.data" :key="index" class="coupon-item" :class="[coupon.used_status === 1 && 'used', coupon.used_status === 2 && 'overdue']">
          <div class="c-type">
            <div class="c-money">
              <span>￥</span>
              <strong>{{ coupon.coupon_price | unitPrice }}</strong>
            </div>
            <div class="c-limit">
              满￥{{ coupon.coupon_threshold_price | unitPrice }}可用
            </div>
            <div class="c-shop" v-if="coupon.use_scope">
              仅限
              <span v-if="coupon.use_scope === 'ALL'">全平台</span>
              <span v-if="coupon.use_scope === 'CATEGORY'">品类</span>
              <span v-if="coupon.use_scope === 'SOME_GOODS'">部分商品</span>
              使用
            </div>
            <div class="c-shop" v-else>
              仅限<router-link :to="'/shop/' + coupon.seller_id" style="color: #fff">{{ coupon.seller_name }} 店铺使用</router-link>
            </div>
            <div class="c-time">
              {{ coupon.start_time | unixToDate('yyyy-MM-dd') }} - {{ coupon.end_time | unixToDate('yyyy-MM-dd') }}
            </div>
          </div>
          <div class="c-othr">
            <p v-if="coupon.order_sn">订单号：{{ coupon.order_sn }}</p>
            <p v-if="coupon.used_status === 1">已使用</p>
            <p v-else-if="coupon.used_status === 2">已过期</p>
            <div v-else>
              <router-link v-if="coupon.use_scope === 'ALL'" :to="'/'" class="use-btn">立即使用</router-link>
              <router-link v-else-if="coupon.use_scope === 'CATEGORY'" :to="'/goods?category=' + coupon.scope_id" class="use-btn">
                立即使用
              </router-link>
              <router-link v-else-if="coupon.use_scope === 'SOME_GOODS'" :to="'/goods/' + coupon.scope_id" class="use-btn">
                立即使用
              </router-link>
              <router-link v-else :to="'/shop/' + coupon.seller_id" class="use-btn">立即使用</router-link>
            </div>
          </div>
          <i class="is-used"></i>
          <i class="is-overdue"></i>
        </li>
      </ul>
      <span class="clr"></span>
      <div class="member-pagination" v-if="coupons">
        <el-pagination
          v-if="coupons.data_total"
          @current-change="handleCurrentPageChange"
          :current-page.sync="params.page_no"
          :page-size="params.page_size"
          layout="total, prev, pager, next"
          :total="coupons.data_total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import * as API_Goods from '@/api/goods'
import * as API_Members from '@/api/members'

export default {
  name: 'my-coupons',
  head() {
    return {
      title: `优惠券-${this.site.title}`
    }
  },
  data() {
    return {
      coupons: '',
      params: {
        page_no: 1,
        page_size: 8
      },
      tabs: [
        { label: '可用优惠券', key: 1, active: true },
        { label: '已用优惠券', key: 2, active: false },
        { label: '已过期优惠券', key: 3, active: false }
      ]
    }
  },
  mounted() {
    this.GET_Coupons()
  },
  methods: {
    /** 当前页数发生改变 */
    handleCurrentPageChange(page) {
      this.params.page_no = page
      this.GET_Coupons()
    },
    GET_Coupons() {
      API_Members.getCoupons({ ...this.params, status: this.tabs.find(item => item.active).key }).then(response => {
        this.coupons = response
        for (let i in this.coupons.data) {
          if (this.coupons.data[i].scope_id) {
            this.coupons.data[i].scope_id = this.coupons.data[i].scope_id.split(',')[1]
          }
          // 如果返回的use_scope为部分商品 SOME_GOODS, 通过店铺sku 获取商品详情id
          if (this.coupons.data[i].use_scope === 'SOME_GOODS') {
            API_Goods.getGoodsSkusShop(this.coupons.data[i].scope_id).then(res => {
              this.coupons.data[i].scope_id = res
            })
          }
        }
        this.MixinScrollToTop()
      })
    },
    changeTabs(current) {
      this.tabs.forEach(item => {
        if (item.key === current.key) {
          item.active = true
        } else {
          item.active = false
        }
      })
      this.params.page_no = 1
      this.GET_Coupons()
    }
  }
}
</script>

<style lang="scss" scoped>
.member-nav-list {
  .active {
    a {
      color: #ff5000;
    }
  }
}
.coupons-container {
  padding-top: 10px;
}
.coupon-item {
  float: left;
  position: relative;
  width: 227px;
  margin: 0 20px 20px 0;
  &.used {
    filter: grayscale(100%);
    .is-used {
      display: block;
    }
  }
  &.overdue {
    filter: grayscale(100%);
    .is-overdue {
      display: block;
    }
  }
  &:nth-child(4n) {
    margin-right: 0;
  }
  .c-type {
    position: relative;
    background-color: #ff5e5e;
    height: 135px;
    padding-top: 30px;
    color: #fff;
    overflow: hidden;
    text-align: center;
    background-image: -webkit-gradient(linear, 50% 0, 0 100%, from(transparent),
      color-stop(.5, transparent),
      color-stop(.5, #f9f9f9),
      to(#f9f9f9)),
    -webkit-gradient(linear, 50% 0, 100% 100%, from(transparent),
        color-stop(.5, transparent),
        color-stop(.5, #f9f9f9),
        to(#f9f9f9));
    background-size: 12px 6px;
    background-repeat: repeat-x;
    background-position: 0 100%;
    &:before, &:after {
      content: ' ';
      position: absolute;
      top: 50%;
      margin-top: -35px;
      width: 40px;
      height: 40px;
      background-color: #fff;
      border-radius: 100%;
    }
    &:before {
      left: -20px
    }
    &:after {
      right: -20px
    }
  }
  .c-money {
    span {
      font-size: 18px
    }
    strong {
      line-height: 45px;
      font-size: 40px;
      font-family: Arial;
      margin-left: 3px;
    }
  }
  .c-limit {
    height: 20px;
    line-height: 22px;
    overflow: hidden;
    margin: 0 5px 5px;
  }
  .c-shop {
    padding-bottom: 6px;
  }
  .c-time {
    font-family: Verdana;
  }
  .c-othr {
    min-height: 50px;
    background-color: #fff;
    box-shadow: 0 2px 10px 0 #ccc;
    text-align: center;
    padding-top: 20px;
    .use-btn {
      display: inline-block;
      width: 100px;
      line-height: 28px;
      text-align: center;
      color: #ff5d5e;
      border-radius: 15px;
      cursor: pointer;
      border: 1px solid #ff6966;
      transition: all .2s ease;
      font-weight: 500;
      &:hover {
        background-color: #ff6966;
        color: #fff;
      }
    }
  }
  .is-used, .is-overdue {
    display: none;
    position: absolute;
    z-index: 10;
    top: 0;
    right: 20px;
    width: 120px;
    height: 120px;
    background: url("") no-repeat;
    background-size: 100%;
  }
  .is-overdue {
    background: url("");
  }
}
</style>
